  <template>
    <body id="poster">
    <transition
        mode="out-in"
        appear
        enter-active-class="animate__animated animate__swing"
        leave-active-class="animate__animated animate__rollOut"
        name="fade" :duration="4000"
    >
      <el-form class="login-container" label-position="left"
               :rules="rules"
               ref="registeredForm"
               :model="registeredForm"
               label-width="0px">
  <!--        <h3 class="login_title">用户注册</h3>-->
        <div class="login_form_header">
          <router-link class="login_title" to="/login">登录</router-link>
          <el-divider direction="vertical"></el-divider>
          <router-link class="login_title" to="/registered">注册</router-link>
        </div>

          <el-divider>
            <i class="el-icon-mobile-phone"></i>
          </el-divider>
          <el-form-item class="input-back" style="margin-top: 20px" prop="username">
            <el-input type="text" v-model="registeredForm.username"
                      auto-complete="off" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="email">
              <el-input type="email" v-model="registeredForm.email"
                        auto-complete="off" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="password">
              <el-input type="password" v-model="registeredForm.password"
                        auto-complete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input type="password" v-model="registeredForm.password2"
                      auto-complete="off" placeholder="请确定密码"></el-input>
          </el-form-item>
          <el-form-item prop="checkCode">
              <el-input style="width: 60%"  v-model="registeredForm.checkCode"
                        auto-complete="off" placeholder="请输入验证码"></el-input>
              <el-button @click="sendCheckCode" style="margin-left: 25px" type="primary">发送验证码</el-button>
          </el-form-item>
          <el-form-item style="width: 100%">
              <el-button type="primary" style="width: 100%;background: #80b4d7;border: none;"
                         v-on:click="registered('registeredForm')">注 册</el-button>
          </el-form-item>
      </el-form>
    </transition>
    </body>
</template>

<script>
import axios from '../../axios/index.js'
import { ElMessage } from 'element-plus'
import "animate.css"
export default {
  name: 'Registered',
  components: {
  },
  data () {
    return {
      registeredForm: {
        username: '',
        email: '',
        password1: '',
        password2: '',
        checkCode: ''
      },
      responseResult: [],
      rules: {
        email: [
          {
            type: 'email',
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        password2: [
          {
            required: true,
            message: '请确定密码',
            trigger: 'blur'
          }
        ],
        checkCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    sendCheckCode(){
      if (this.registeredForm.password !== this.registeredForm.password2){
        ElMessage.error("两次密码不一致")
        return;
      }
      if(this.registeredForm.email !== ''){
        let pattern = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
        if (pattern.test(this.registeredForm.email)){
          axios.get('/user/register/getCode/'+ this.registeredForm.email).then(()=>{
            ElMessage({
              message: '发送成功,请及时输入',
              type: 'success',
            })
          }).catch((error)=>{
            ElMessage.error(error)
          })
        }else{
          ElMessage({
            message: '请输入正确的邮箱地址',
            type: 'warning',
          })
        }
      }else{
        ElMessage({
          message: '请输入邮箱',
          type: 'warning',
        })
      }
    },
    registered (registeredForm) {
      this.$refs[registeredForm].validate((valid) => {
        if (valid) {
          axios.post('/user/register/verify', this.registeredForm).then(() => {
            ElMessage({
              message: '注册成功,为你跳转到登录页面',
              type: 'success',
            })
            this.$router.push('/Login')
          }).catch(error => {
            ElMessage.error(error)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
    border-radius: 30px;
    background-clip: padding-box;
    width: 400px;
    padding: 35px 35px 15px 35px;
    background: rgb(63, 170, 217,0.05);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #041f2d;
}
.login_form_header{
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
a{
  text-decoration: none;
}
.el-input{
  --el-input-bg-color: rgb(63, 170, 217,0.1);
  --el-input-text-color: black;
  --el-input-placeholder-color: rgb(81, 100, 115);
}
</style>
